import { Component } from 'react';
import { View } from '@tarojs/components';
import NavBar from '@/components/NavBar/index';
// import userInfo from '@/mock/userInfo.json';
import Taro from '@tarojs/taro';
// import Login from '@/pages/login/index';
import { getToken, removeToken } from '@/utils/authUtil';
import { getUserInfo } from '@/service/apis/session/index';
import { getRemainList, getPackageList } from '@/service/apis/mine/index';
import LoginForm from '@/pages/login/components/LoginForm/index';
import Header from './components/Header';
import GoodOrder from './components/GoodOrder';
import AppointmentRecord from './components/AppointmentRecord';
import MoreSetting from './components/MoreSetting';
import MoreService from './components/MoreService';
import './index.scss';

export default class Index extends Component {
  state = {
    isLogin: false,
    allCount: 0,
    cardId: '',
    cardShop: '',
    userInfo: {},
    canBuyVip: false,
  };
  componentDidShow = async () => {
    this.init();
  };

  config = {
    navigationBarTitleText: '个人中心',
    navigationBarBackgroundColor: '#000',
    navigationBarTextStyle: 'white',
  };

  init = () => {
    const token = getToken();
    if (!token) {
      this.setState({
        isLogin: false,
      });
    } else {
      this.setState(
        {
          isLogin: true,
        },
        () => {
          this.getUserInfo();
        },
      );
    }
  };

  onLoginSuccess = () => {
    this.setState(
      {
        isLogin: true,
      },
      () => {
        this.getUserInfo();
      },
    );
  };

  getUserInfo = async () => {
    try {
      const { data } = await getUserInfo();
      this.setState({
        userInfo: data.user_info,
      });
      if (data.user_info.user_level > 0) {
        this.getVipCardList();
      } else {
        this.getCardList();
      }
    } catch (err) {
      this.setState(
        {
          isLogin: false,
        },
        () => {
          removeToken();
        },
      );
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };

  getVipCardList = async () => {
    try {
      const { data } = await getRemainList();
      console.log('vop', data);

      this.setState({
        allCount: data.residue_number,
        cardShop: data.list?.[0].store_name,
        cardId: data.card_id,
      });
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };

  getCardList = async () => {
    try {
      const { data } = await getPackageList();
      console.log('vop', data);

      this.setState({
        canBuyVip: data.package_list && data.package_list.length > 0,
      });
    } catch (err) {
      this.setState({
        canBuyVip: false,
      });
    }
  };

  onBuyVipSuccess = () => {
    this.getUserInfo();
  };

  render() {
    const { isLogin, userInfo, allCount, cardShop, cardId, canBuyVip } = this.state;
    console.log('user', canBuyVip);
    return (
      <View className="homeWrap">
        {isLogin ? (
          <>
            <NavBar
              showBackBtn={false}
              title="个人中心"
              style={{ color: '#fff', background: '#f73f6c' }}
            />
            <Header
              canBuyVip={canBuyVip}
              userInfo={userInfo}
              allCount={allCount}
              cardShop={cardShop}
              cardId={cardId}
            />
            <GoodOrder type={1} name="商品订单" />
            <GoodOrder type={4} name="秒杀订单" />
            <AppointmentRecord />
            <MoreSetting />
            <MoreService />
          </>
        ) : (
          <LoginForm onLoginSuccess={this.onLoginSuccess} showBackBtn={false} />
        )}
      </View>
    );
  }
}
